import React from 'react';

import { Modal, Carousel } from 'antd';

import './index.less';

// 图片弹窗props接口
export interface PictureModalProps {
  title?: string;
  imgList: string[];
  visible: boolean;
  onCancel: (status: boolean) => void;
}

const PictureModal: React.FC<PictureModalProps> = (props) => {
  const {
    title = '查看照片',
    imgList,
    visible,
    onCancel
  } = props;

  // 渲染图片列表
  const renderImgList = (list: string[]) => {
    return (
      list.map((item: string) => (
        <div className="imgWrap" key={item}>
          <img src={item} alt="" />
        </div>
      ))
    )
  };

  return (
    <Modal
      title={title}
      width={1000}
      destroyOnClose
      maskClosable={false}
      wrapClassName="custom-spv-modal"
      visible={visible}
      onCancel={() => onCancel(false)}
      footer={null}
    >
      <div className="custom-ass-carousel">
        <Carousel autoplay>{renderImgList(imgList)}</Carousel>
      </div>
    </Modal>
  );
  
};

export default PictureModal;
